import React, { Component } from 'react'

export default class App extends Component {

    state = {
        imgSrc: ''
    }

    getFile = e => {
        console.log(e.target.files[0]);
        // 通过创建临时 URL 地址的方式显示图片
        // this.setState({
        //     imgSrc: URL.createObjectURL(e.target.files[0])
        // })

        // 创建一个文件加载器
        const reader = new FileReader()

        // 读取文件
        reader.readAsDataURL(e.target.files[0])

        // 文件读取成功之后的回调函数
        reader.onload = () => {
            // 将读取的内容给到 imgSrc 即可
            this.setState({
                imgSrc: reader.result
            })
        }

    }


    render() {
        return (
            <div>

                <input type="file" onChange={this.getFile} />

                <img src={this.state.imgSrc} alt="" />

            </div>
        )
    }
}
